import { Button, Descriptions, message, Popconfirm, Spin, Table } from "antd";
import { connect } from "dva";
import { routerRedux } from "dva/router";
import moment from "moment";
import PropTypes from "prop-types";
import React, { PureComponent } from "react";
import Ellipsis from "@/components/Ellipsis";
import MsgRulerModal from "../warningCar/msgRulerModal";
import SendMsgModal from "../warningRecord/sendMsgModal";
import styles from "./index.less";
import { getDicByKey } from '@/support/common';
import MaskText from "@/components/MaskText";
@connect((state) => ({
  menu: state.menu,
  warningRecord: state.warningRecord,
}))
export default class WarningRecordDetail extends PureComponent {
  static contextTypes = {
    authButton: PropTypes.array,
    dicData: PropTypes.any,
  };

  // TODO:修改页面数据来源为url解析参数获取sid，后端需要扩展detail接口返回字段:riskWarnStatus,limpEnable, riskStatus, vin, orgId
  state = {
    sendMsgModalVisible: false,
    // record: JSON.parse(sessionStorage.getItem('warningRecord') || '{}'),
    uuid: JSON.parse(sessionStorage.getItem("warningRecord") || "{}")?.uuid,
    vin: JSON.parse(sessionStorage.getItem("warningRecord") || "{}")?.vin,
    rikWarnStatus: JSON.parse(sessionStorage.getItem("warningRecord") || "{}")
      ?.warnStatus,
    rikWarnType: JSON.parse(sessionStorage.getItem("warningRecord") || "{}")
      ?.warnType,
    userList: [],
    tboxRouseloading: false,
    tboxRouseCount: 35,

    ruleList: [],
    msgRuleModalVisible: false,
    ruleListSelectedRecord: {},
    ruleListType: 1,
    detailInfo: {},

    lastAckList: {},
  };

  handlemsgRemove = (record) => {
    const { dispatch } = this.props;
    let params = {
      businessCode: "risk-warn-log",
      vin: record.vin,
      businessId: record.uuid,
    };

    dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/ivi/warn/remove",
        ...params,
      },
      callback: (response) => {
        if (response.statusCode === "0") {
          message.success("修改成功");
          this.queryDetail();
        } else {
          // message.error(response.statusMessage);
        }
      },
    });
  };
  handleWarnMsg = (record) => {
    console.log('record---', record)
    let params = {
      businessCode: "risk-warn-log",
      vin: record.vin,
      iviNoticeUuid: "",
      businessId: record.uuid,
    };
    this.props.dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/ivi/warn",
        ...params,
      },
      callback: (response) => {
        if (response.statusCode === "0") {
          message.success("发送成功");
          this.queryDetail();
        } else {
          // message.error(response.statusMessage);
        }
      },
    });
  };

  handlemsgRulerList = (record, type) => {
    // 0-正常行驶，1-锁车，2-跛行
    // let showTypes = [2, 3];
    // if (record.riskStatus == "0") {
    //   showTypes = [1, 2, 3];
    // }
    let params = {};
    if (type == 1) {
      // 正常行驶
      if (record.riskStatus == "0") {
        params = {
          showTypes: [1, 2, 3],
          useType: 3,
        };
      } else if (record.riskStatus == "1") {
        params = {
          showTypes: [1, 2, 3],
          useType: 2,
        };
      } else if (record.riskStatus == "2") {
        params = {
          showTypes: [1, 2, 3],
          useType: 1,
        };
      } else {
        params = {
          showTypes: [1, 2, 3],
          useType: 3,
        };
      }
    } else if (type == 2) {
      //锁车
      params = {
        showTypes: [1, 2, 3],
        useType: 2,
      };
    } else if (type == 3) {
      params = {
        showTypes: [1, 2, 3],
        useType: 1,
      };
    }
    this.props.dispatch({
      type: "warningRecord/postObjWithRes",
      payload: {
        url: "/mscreditbusiness/iviNotice/list",
        ...params,
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          this.setState({
            ruleList: response.data,
            msgRuleModalVisible: true,
            ruleListSelectedRecord: record,
            ruleListType: type,
            businessId: record.uuid,
          });
        } else {
          // message.error(response.statusMessage);
        }
      },
    });
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    console.log(JSON.parse(sessionStorage.getItem("warningRecord") || "{}"));
    this.setState({
      detailInfo: JSON.parse(sessionStorage.getItem("warningRecord") || "{}"),
    });
    const record = JSON.parse(sessionStorage.getItem("warningRecord") || "{}");
    // console.log(record)
    let uuid;
    if (location && location.search) {
      // '?sid='
      const queryArr = location.search.split("&");
      uuid = queryArr[0].substr(5);
    } else {
      uuid = record?.uuid;
    }
    // this.querylastAckList()
    this.setState({ uuid }, () => {
      this.queryDetail();
    });
  }

  componentWillUnmount() {
    // sessionStorage.removeItem('warningRecord')
    clearInterval(this.timer2);
    clearInterval(this.timer);
  }
  // querylastAckList() {
  //   const { sid } = this.state;
  //   dispatch({
  //     type: "http2/postFetchPage",
  //     payload: {
  //       url: `mscreditvehicle/warning/getAckDate?vin=${sid}`,
  //     },
  //     callback: () => {
  //       if (response && response.statusCode == "0") {
  //         this.setState({
  //           lastAckList: response.data,
  //         });
  //       } else {
  //         message.error(response.statusMessage);
  //       }
  //     },
  //   });
  // }
  queryDetail() {
    const { dispatch } = this.props;
    const { uuid, vin } = this.state;
    dispatch({
      type: "warningRecord/recordDetail",
      payload: {
        url: '/mscreditbusiness/vehicle/risk/warn/record/detail',
        uuid,
      },
      callback: () => {
        dispatch({
          type: "warningRecord/riskResultList",
          payload: {
            url: '/mscreditbusiness/vehicle/risk/warn/result/page',
            businessCode: "risk-warn-log",
            uuid,
            vin,
            businessId: uuid,
            curPage: 1,
            pageSize: 10,
          },
        });
      },
    });
  }
  handleLocation = (record) => {
    sessionStorage.setItem("vin", record?.vin);
    sessionStorage.setItem("warningRecordUuuid", record?.uuid);
    sessionStorage.setItem("businessCode", "risk-warn-log");
    sessionStorage.setItem(
      "warningCarLocationbackPath",
      "/creditPlatform/warningRecordDetail"
    );
    this.props.dispatch(
      routerRedux.push({
        pathname:
          "/creditPlatform/warningCarLocation",
      })
    );
  };
  handleDealWarning = (record) => {
    const { dispatch } = this.props;
    const orgId = record.orgId;
    dispatch({
      type: 'warningRecord/getDataWithRes',
      payload: {
        url: '/org/accountInfo/list',
        orgId,
      },
      callback: (response) => {
        this.setState({
          userList: response.data,
          sendMsgModalVisible: true,
          selectedRecord: record,
          businessId: record.uuid,
        });
      },
    });
  };
  handleLockCar = (record) => {
    const { uuid } = this.state;
    this.props.dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/lock/set",
        vin: record.vin,
        businessId: uuid,
        businessCode: "risk-warn-log",
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          message.success("设置锁车成功");
          this.queryDetail();
        } else {
          // message.error(response.statusMessage);
        }
      },
    });
  };

  handleUnlockCar = (record) => {
    const { uuid } = this.state;
    this.props.dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/lock/remove",
        vin: record.vin,
        businessId: uuid,
        businessCode: "risk-warn-log",
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          message.success("解除锁车成功");
          this.queryDetail();
        } else {
          // message.error(response.statusMessage);
        }
      },
    });
  };
  /**
   * 解除跛行并锁车
   * @param {} vin
   */
  handleUnlimpAndLockCar = (record) => {
    const { uuid } = this.state;
    this.props.dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/limp/remove",
        vin: record.vin,
        businessId: uuid,
        businessCode: "risk-warn-log",
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          // message.success("解除跛行成功");
          this.props.dispatch({
            type: "warningRecord/postDataWithRes",
            payload: {
              url: "/mscreditbusiness/vehicle/lock/set",
              vin: record.vin,
              businessId: uuid,
              businessCode: "risk-warn-log",
            },
            callback: (response) => {
              if (response && response.statusCode == "0") {
                message.success("解除跛行并锁车成功");
                this.queryDetail();
              } else {
                // message.error(response.statusMessage);
              }
            },
          });
        } else {
          // message.error(response.statusMessage);
        }
      },
    });
  };

  handleLimp = (record) => {
    const { uuid } = this.state;
    this.props.dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/limp/set",
        vin: record.vin,
        businessId: uuid,
        businessCode: "risk-warn-log",
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          message.success("设置跛行成功");
          this.queryDetail();
        } else {
          message.error(response.statusMessage);
        }
      },
    });
  };
  /**
   * 解除锁车并跛行
   * @param {} record
   */
  handleUnlockAndLimp = (record) => {
    const { uuid } = this.state;
    this.props.dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/lock/remove",
        vin: record.vin,
        businessId: uuid,
        businessCode: "risk-warn-log",
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          // message.success("解除跛行成功");
          this.props.dispatch({
            type: "warningRecord/postDataWithRes",
            payload: {
              url: "/mscreditbusiness/vehicle/limp/set",
              vin: record.vin,
              businessId: uuid,
              businessCode: "risk-warn-log",
            },
            callback: (response) => {
              if (response && response.statusCode == "0") {
                message.success("解除锁车并跛行成功");
                this.queryDetail();
              } else {
                // message.error(response.statusMessage);
              }
            },
          });
        } else {
          // message.error(response.statusMessage);
        }
      },
    });
  };

  handleUnlimp = (record) => {
    const { uuid } = this.state;
    this.props.dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/limp/remove",
        vin: record.vin,
        businessId: uuid,
        businessCode: "risk-warn-log",
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          message.success("解除跛行成功");
          this.queryDetail();
        } else {
          // message.error(response.statusMessage);
        }
      },
    });
  };
  /**
   * tbox唤醒
   * @param {data} record
   */
  handleWakeUp = (record) => {
    const { uuid } = this.state;
    this.props.dispatch({
      type: "warningRecord/postDataWithRes",
      payload: {
        url: "/mscreditbusiness/vehicle/tbox/wake",
        vin: record.vin,
        businessId: uuid,
        businessCode: "risk-warn-log",
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          message.success("已经给该车辆发送远程唤醒指令");
          this.setState({
            tboxRouseloading: true,
          });
          let tboxRouseCount = 35;
          let tboxRouseSearchCount = 3;
          this.timer = setInterval(() => {
            tboxRouseCount--;
            this.setState({ tboxRouseCount });
            //请求详情接口
            if (tboxRouseCount <= 0) {
              this.setState({
                tboxRouseloading: false,
                tboxRouseCount: 35,
              });
              clearInterval(this.timer);
              message.error("TBOX没有被成功唤醒");
              this.queryDetail();
            }
          }, 1000);

          this.timer2 = setInterval(() => {
            tboxRouseSearchCount--;
            //请求详情接口
            const {uuid} = this.state;
            this.props.dispatch({
              type: "warningRecord/recordDetail",
              payload: {
                url: '/mscreditbusiness/vehicle/tbox/wake/result',
                vin: record.vin,
              },
              callback: (response) => {
                if (response && response.statusCode == "0") {
                  console.log("请求接口详情", tboxRouseSearchCount);
                  //比较TBOX失联天数
                  if (response.data) {
                    message.success("TBOX被成功唤醒");
                    this.queryDetail();
                    clearInterval(this.timer2);
                    clearInterval(this.timer);
                    this.setState({
                      tboxRouseloading: false,
                      tboxRouseCount: 35,
                    });
                  }
                } else {
                  message.error(response.statusMessage);
                }
              },
            });

            if (tboxRouseSearchCount <= 0 || tboxRouseCount <= 0) {
              clearInterval(this.timer2);
            }
          }, 10000);
        } else {
          message.error(response.statusMessage);
        }
      },
      // callback: (response) => {
      //   if (response && response.statusCode == "0") {
      //     message.success(response.statusMessage)
      //     this.queryDetail()
      //   } else {
      //     message.error(response.statusMessage)
      //   }
      // },
    });
  };
  handleOnReturn = () => {
    console.log("this.props", this.props);
    sessionStorage.removeItem("warningRecord");
    const backPath = sessionStorage.getItem("warningRecordBackPath");
    this.props.dispatch(
      routerRedux.push({
        pathname: backPath,
      })
    );
  };
  handleTableChange = (page) => {
    const { dispatch } = this.props;
    const { record, uuid, vin } = this.state;
    const params = {
      curPage: page.current,
      pageSize: page.pageSize,
      businessId: uuid,
      businessCode: "risk-warn-log",
      uuid,
      vin,
    };
    dispatch({
      type: "warningRecord/riskResultList",
      payload: {
        url: '/mscreditbusiness/vehicle/risk/warn/result/page',
        ...params
      },
    });
  };
  showBtn = (type) => {
    const {
      warningRecord: {
        recordDetail: { limpEnable, riskStatus, tboxLostDays },
      },
    } = this.props;
    switch (type) {
      case "lockCar": {
        return riskStatus == "0";
      }
      case "unlimpAndLockCar": {
        return limpEnable == 1 && riskStatus == "2";
      }
      case "unlockCar": {
        return riskStatus == "1";
      }
      case "limp": {
        return limpEnable == 1 && riskStatus == "0";
      }
      case "unlockAndLimp": {
        return limpEnable == 1 && riskStatus == "1";
      }
      case "unlimp": {
        return limpEnable == 1 && riskStatus == "2";
      }
      case "wakeUp": {
        return tboxLostDays > 0;
      }
      default:
        return false;
    }
  };
  render() {
    const {
      sendMsgModalVisible,
      userList,
      tboxRouseloading,
      tboxRouseCount,
      rikWarnStatus,
      rikWarnType,
    } = this.state;

    const {
      warningRecord: {
        detailLoading,
        recordDetail,
        riskResultList,
        pagination,
      },
      dispatch,
    } = this.props;
    const { warnType, warnStatus, overduDateCount } = recordDetail;
    const {menu: { permissions }} = this.props;
    const {location: { pathname }} = this.props;
    const warnBtnAuth = permissions.includes(pathname + '/' + 'warningRecordDetail_warn');
    const dealWarningBtnAuth = permissions.includes(pathname + '/' + 'warningRecordDetail_deal');
    const locationBtnAuth = permissions.includes(pathname + '/' + 'warningRecordDetail_location');
    const lockCarBtnAuth = permissions.includes(pathname + '/' + 'warningRecordDetail_lockCar');
    const unlockCarBtnAuth = permissions.includes(pathname + '/' + 'warningRecordDetail_unlockCar');
    const limpBtnAuth = permissions.includes(pathname + '/' + 'warningRecordDetail_limp');
    const unlimpBtnAuth= permissions.includes(pathname + '/' + 'warningRecordDetail_unlimp');
    const wakeUpBtnAuth = permissions.includes(pathname + '/' + 'warningRecordDetail_wakeup');
    const isWarn =
      warnBtnAuth &&
      warnType != 0 &&
      ((warnType == 1 && overduDateCount >= 1) || warnType == 2);
    // console.log(riskResultList)
    const dealStatusHash = {
      1: "已处理",
      0: "未处理",
    };
    const columns = [
      {
        title: "序号",
        dataIndex: "no",
        render: (text, record, index) => {
          return index + 1 + (pagination.current - 1) * pagination.pageSize;
        },
      },
      {
        title: "操作时间",
        dataIndex: "operateTime",
        render: (text, record) => moment(text).format("YYYY-MM-DD HH:mm:ss"),
      },
      {
        title: '操作人',
        dataIndex: 'operator',
        render(val) {
          return <MaskText text={val} type="name" />;
        },
      },
      { title: "操作类型", dataIndex: "operationContent" },
      {
        title: "备注",
        dataIndex: "remark",
        render: (text) => (
          <Ellipsis length={14} tooltip>
            {text}
          </Ellipsis>
        ),
      },
    ];
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => (
        <span>
          共&nbsp;{pagination === undefined ? 0 : pagination.total}&nbsp;条
        </span>
      ),
    };
    // 处理状态为未处理且车辆预警状态为“预警”
    const isShowBtn =
      recordDetail.dealStatus == 0 && recordDetail.riskWarnStatus == 1;
    return (
      <Spin
        spinning={tboxRouseloading}
        size="large"
        tip={`Loading(${tboxRouseCount})s`}
      >
        <div className={styles.root}>
          <div className={styles.topBtn}>
            <Button type="primary" onClick={() => this.handleOnReturn()}>
              返回
            </Button>
          </div>
          <div className={styles.midContent}>
            <Descriptions column={1}>
              <Descriptions.Item label="预警时间">
                {moment(recordDetail?.riskTriggerDate).format(
                  "YYYY-MM-DD HH:mm:ss"
                )}
              </Descriptions.Item>
              <Descriptions.Item label="触发的异常事件">
                {recordDetail?.riskEventContent}
              </Descriptions.Item>
              <Descriptions.Item label="预警内容">
                {recordDetail?.riskWarnMsg}
              </Descriptions.Item>
              <Descriptions.Item label="设置的管理规则">
                {recordDetail?.riskControlResult}
              </Descriptions.Item>
              {/* <Descriptions.Item label="预警信息">{recordDetail?.warnTemplate}</Descriptions.Item> */}
              <Descriptions.Item label="处理状态">
                {dealStatusHash[recordDetail?.dealStatus]}
              </Descriptions.Item>

              <Descriptions.Item label="车机告警类型">
                {recordDetail?.warnType == 0
                  ? "暂不支持"
                  : recordDetail?.warnType == 1
                  ? "不可配置"
                  : recordDetail?.warnType == 2
                  ? "可配置"
                  : ""}
              </Descriptions.Item>
              <Descriptions.Item label="车机告警状态">
                {recordDetail?.warnStatus == 0
                  ? "正常"
                  : recordDetail?.warnStatus == 1
                  ? "车机告警"
                  : ""}
              </Descriptions.Item>
              {rikWarnStatus == 1 && rikWarnType == 2 ? (
                <Descriptions.Item label="车机告警最新回执时间">
                  {recordDetail?.lastAckDate
                    ? moment(recordDetail.lastAckDate).format(
                        "YYYY-MM-DD HH:mm:ss"
                      )
                    : ""}
                </Descriptions.Item>
              ) : null}
              <Descriptions.Item label="授信类型">
              {getDicByKey(this.context.dicData, 'creditType', recordDetail?.creditType) || ''}
              </Descriptions.Item>
            </Descriptions>
          </div>
          <div className={styles.btnGroup}>
            {isShowBtn ? (
              <>
                {locationBtnAuth && (
                  <Button
                    className={styles.btn}
                    type="primary"
                    onClick={() => this.handleLocation(recordDetail)}
                  >
                    查看定位
                  </Button>
                )}
                {dealWarningBtnAuth && (
                  <Button
                    className={styles.btn}
                    type="primary"
                    onClick={() => this.handleDealWarning(recordDetail)}
                  >
                    管理告警
                  </Button>
                )}
                {lockCarBtnAuth && this.showBtn("lockCar") && (
                  <Button
                    className={styles.btn}
                    type="primary"
                    onClick={() =>
                      isWarn && warnType != 1
                        ? this.handlemsgRulerList(recordDetail, 2)
                        : this.handleLockCar(recordDetail)
                    }
                  >
                    锁车
                  </Button>
                )}
                {lockCarBtnAuth && this.showBtn("unlimpAndLockCar") && (
                  <Popconfirm
                    key="unlimpAndLockCar"
                    title={
                      isWarn && warnType == 1
                        ? "该车已处于跛行状态，是否解除跛行状态并实施锁车和车机告警吗?"
                        : "该车已处于跛行状态，是否解除跛行状态并实施锁车？"
                    }
                    onConfirm={() =>
                      isWarn && warnType != 1
                        ? this.handlemsgRulerList(recordDetail, 2)
                        : this.handleLimp(recordDetail)
                    }
                  >
                    <Button className={styles.btn} type="primary">
                      锁车
                    </Button>
                  </Popconfirm>
                )}
                {unlockCarBtnAuth && this.showBtn("unlockCar") && (
                  <Button
                    className={styles.btn}
                    type="primary"
                    onClick={() => this.handleUnlockCar(recordDetail)}
                  >
                    解除锁车
                  </Button>
                )}
                {limpBtnAuth && this.showBtn("limp") && (
                  <Button
                    className={styles.btn}
                    type="primary"
                    onClick={() =>
                      isWarn && warnType != 1
                        ? this.handlemsgRulerList(recordDetail, 3)
                        : this.handleLimp(recordDetail)
                    }
                  >
                    跛行
                  </Button>
                )}
                {limpBtnAuth && this.showBtn("unlockAndLimp") && (
                  <Popconfirm
                    key="unlockAndLimp"
                    title={
                      isWarn && warnType == 1
                        ? "该车已处于锁车状态，是否解除锁车状态并实施跛行和车机告警吗？"
                        : "该车已处于锁车状态，是否解除锁车状态并实施跛行？"
                    }
                    onConfirm={() =>
                      isWarn && warnType != 1
                        ? this.handlemsgRulerList(recordDetail, 3)
                        : this.handleLimp(recordDetail)
                    }
                  >
                    <Button className={styles.btn} type="primary">
                      跛行
                    </Button>
                  </Popconfirm>
                )}
                {unlimpBtnAuth && this.showBtn("unlimp") && (
                  <Button
                    className={styles.btn}
                    type="primary"
                    onClick={() => this.handleUnlimp(recordDetail)}
                  >
                    解除跛行
                  </Button>
                )}
                {wakeUpBtnAuth && this.showBtn("wakeUp") && (
                  <Popconfirm
                    key="wakeUp"
                    title="是否要对TBOX进行远程唤醒？"
                    onConfirm={() => this.handleWakeUp(recordDetail)}
                  >
                    <Button className={styles.btn} type="primary">
                      TBOX唤醒
                    </Button>
                  </Popconfirm>
                )}

                {isWarn && warnStatus == 1 && (
                  <Popconfirm
                    key="msgremoverulerBtn"
                    title="是否解除车机告警"
                    onConfirm={() => this.handlemsgRemove(recordDetail)}
                  >
                    <Button className={styles.btn} type="primary">
                      解除车机告警
                    </Button>
                  </Popconfirm>
                )}
                {isWarn && warnStatus == 0 && (
                  <Popconfirm
                    key="msgrulerBtn"
                    title="是否车机告警"
                    onConfirm={() =>
                      warnType == 1
                        ? this.handleWarnMsg(recordDetail)
                        : this.handlemsgRulerList(recordDetail, 1)
                    }
                  >
                    <Button className={styles.btn} type="primary">
                      车机告警
                    </Button>
                  </Popconfirm>
                  // <Button
                  //   className={styles.btn}
                  //   type="primary"
                  //   onClick={() =>
                  //     warnType == 1
                  //       ? this.handleWarnMsg(recordDetail)
                  //       : this.handlemsgRulerList(recordDetail, 1)
                  //   }
                  // >
                  //   车机告警
                  // </Button>
                )}
              </>
            ) : (
              ""
            )}
          </div>
          <div className={styles.bottomTable}>
            <Table
              loading={detailLoading}
              columns={columns}
              dataSource={riskResultList}
              pagination={paginationProps}
              onChange={this.handleTableChange}
            />
          </div>
          {sendMsgModalVisible && (
            <SendMsgModal
              changeVisible={() =>
                this.setState({ sendMsgModalVisible: false }, () => {
                  this.queryDetail();
                })
              }
              visible={sendMsgModalVisible}
              record={recordDetail}
              userList={userList}
              dispatch={dispatch}
            />
          )}
          {this.state.msgRuleModalVisible && (
            <MsgRulerModal
              changeVisible={() => {
                this.setState({ msgRuleModalVisible: false });
                // this.queryDetail();
              }}
              onOk={() => {
                this.setState({ msgRuleModalVisible: false });
                this.queryDetail();
              }}
              businessCode="risk-warn-log"
              visible={this.state.msgRuleModalVisible}
              ruleList={this.state.ruleList}
              record={this.state.ruleListSelectedRecord}
              dispatch={this.props.dispatch}
              ruleListType={this.state.ruleListType}
              businessId={this.state.businessId}
            />
          )}
        </div>
      </Spin>
    );
  }
}
